<h4 class="site-subtitle">1. 字体</h4>
<h5 class="site-thititle">1.1 字体定义<code>font</code></h5>
<div class="site-info">
    默认字体大小<code>14px</code>，行高<code>1.5</code>，字重400，字体颜色#444。
    <pre>
        <code>
font: 14px/1.56 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-weight: 400;
        </code>
    </pre>
</div>
<h5 class="site-thititle">1.2 Webkit 反锯齿</h5>
<div class="site-info">
    在 Webkit 浏览器下还设置了反锯齿平滑渲染，渲染出来要纤细一些，其他内核的浏览器上看着稍粗一些。
    <pre>
            <code>
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
            </code>
        </pre>
</div>
<h4 class="site-subtitle">2. 元素基本样式</h4>
<h5 class="site-thititle">2.1 标题 <code>h1</code>-<code>h6</code></h5>
<div class="site-info">
    标题字体大小未重置，内含外边距（顶部和底部）。
    <table class="site-table">
        <tbody>
            <tr>
                <td>
                    <div class="table-cell">
                        <h1><code>H1</code>标题 <small>尾巴</small></h1>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h2><code>H2</code>标题 <small>尾巴</small></h2>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h3><code>H3</code>标题 <small>尾巴</small></h3>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h4><code>H4</code>标题 <small>尾巴</small></h4>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h5><code>H5</code>标题 <small>尾巴</small></h5>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h6><code>H6</code>标题 <small>尾巴</small></h6>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<h5 class="site-thititle">2.2 段落 <code>p</code></h5>
<div class="site-info">
    段落<code>p</code>字体大小未重置，内含外边距（顶部和底部）。
    <p>这是一个段落<br>这是一个段落<br></p>
    <p>这是另一个一个段落 <br> ...</p>
</div>
<h5 class="site-thititle">2.3 引用 <code>blockquote</code></h5>
<div class="site-info">
    <blockquote>
        <p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>
        <small>马尔克斯 <cite title="《百年孤独》">——《百年孤独》</cite></small>
    </blockquote>
</div>
<h5 class="site-thititle">2.4 列表 <code>ul</code> <code>ol</code> <code>dl</code></h5>
<div class="site-info">
    无序列表
    <ul>
        <li>条目：#1</li>
        <li>条目：#2
            <ul>
                <li>条目：#2.1</li>
                <li>条目：#2.2</li>
                <li>条目：#2.3
                    <ul>
                        <li>条目：#3.1</li>
                        <li>条目：#3.2</li>
                        <li>条目：#3.3</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>条目：#3</li>
        <li>条目：#4</li>
    </ul>
    有序列表
    <ol>
        <li>条目：#1</li>
        <li>条目：#2
            <ol>
                <li>条目：#2.1</li>
                <li>条目：#2.2</li>
                <li>条目：#2.3
                    <ol>
                        <li>条目：#3.1</li>
                        <li>条目：#3.2</li>
                        <li>条目：#3.3</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>条目：#3</li>
    </ol>
    描述
    <dl>
        <dt>列表描述1</dt>
        <dd>描述详情 1</dd>
        <dt>列表描述2</dt>
        <dd>描述详情 2</dd>
        <dt>列表描述3</dt>
        <dd>描述详情 3</dd>
    </dl>
</div>
<h5 class="site-thititle">2.5 表格 <code>table</code></h5>
<div class="site-info">
    <table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>表头 #1</th>
                <th>表头 #2</th>
                <th>表头 #3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据 #1</td>
                <td>数据 #2</td>
                <td>数据 #3</td>
            </tr>
            <tr>
                <td>数据 #1</td>
                <td>数据 #2</td>
                <td>数据 #3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表页脚 #1</td>
                <td>表页脚 #2</td>
                <td>表页脚 #3</td>
            </tr>
        </tfoot>
    </table>
</div>
<h5 class="site-thititle">2.6 其他元素</h5>
<div class="site-info">
    <table class="site-table">
        <thead>
            <tr>
                <th>元素</th>
                <th>基本样式</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;a&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <a>这是一个链接</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;em&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <em>斜体</em>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;strong&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <strong>着重</strong>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;small&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <small>小号文本</small>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;code&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <code>行内代码</code>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;ins&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <ins>插入文本</ins>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;q&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <q>我在 q 里面</q>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;mark&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <mark>我被贴上了 mark 标签</mark>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;del&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <del>被删除的文本</del>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;s&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <s>无用文本</s>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;dfn&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        定义一个东西<dfn>DLNA</dfn>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;abbr&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        缩略语 <abbr title="Internationalization">I18N</abbr>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;cite&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <cite>Citation</cite>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;i&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <i>Italic</i>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;kbd&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <kbd>Ctrl + S</kbd>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;ruby&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <ruby>汉<rt>han</rt>子<rt>zi</rt></ruby>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;samp&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <samp>Sample</samp>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;sup&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        Text<sup>Superscripted</sup>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;u&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <u>带下划线的文本</u>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>